<!--
 * @Author: panda-hbd 1511539537@qq.com
 * @Date: 2022-11-18 10:17:26
 * @LastEditors: 姚贤通 10254465+yao-xiantong@user.noreply.gitee.com
 * @LastEditTime: 2022-11-22 13:36:45
 * @FilePath: \text-online-system3\src\views\HomeworkLibrary.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <!-- 头部按钮栏 -->
    <ul class="nav">
        <li class="btn_left">
                <el-button class="newHomeworkBtn" color="var(--blueColor2)" plain text @click="dialogFormVisible = true">
                    + 新建作业
                </el-button>
                <!-- 新建弹窗 -->
                    <el-dialog v-model="dialogFormVisible" title="作业信息">
                        <el-form :model="form">
                            <el-form-item label="作业标题" :label-width="formLabelWidth">
                                <el-input v-model="form.name" autocomplete="off" />
                            </el-form-item>
                            <el-form-item label="学生须知" :label-width="formLabelWidth">
                                <textarea  v-model="form.region" placeholder="请输入内容...." cols="60" rows="3"></textarea>
                            </el-form-item>
                        </el-form>
                        <template #footer>
                            <span class="dialog-footer">
                                <el-button @click="dialogFormVisible = false">取消</el-button>
                                <el-button type="primary" @click="createNewHomework">
                                    确认创建
                                </el-button>
                            </span>
                        </template>
                    </el-dialog>
                <el-button color="#626aef" plain style="margin-left: 0.5rem;" @click="DeleteAll">
            <el-icon style="margin-right: 0.3rem;"><Delete /></el-icon>删除
        </el-button>
        </li>

        <!-- 右侧 -->
        <li class="btn_right">
            <el-button color="#626aef" plain @click="Download">
                <el-icon style="margin-right: 0.3rem;"><FolderAdd /></el-icon>下载习题模板
            </el-button>
        </li>
    </ul>
    <el-card class="box-card">

            <div class="file_Box">
                <ul class="file">
                    <li class="left">全部文件</li>
                    <li class="right">已全部加载，共{{this.tableData.length}} 个</li>
                </ul>
                <!-- 表格区域 -->
                <el-table ref="multipleTable" :data="tableData" :row-key="getRowKeys"
    @selection-change="selectionChange" class="tab">
                    <el-table-column type="selection" reserve-selection width="55"></el-table-column>
                    <el-table-column prop="id" label="试卷编号" width="100"> </el-table-column>
                    <el-table-column prop="paperName" label="试卷名" > </el-table-column>
                    <el-table-column prop="createTime" label="创建日期" width="130"> </el-table-column>
                    <el-table-column label="操作" width="270">
                        <template #default="scope">
                            <div class="bor">
                            <el-button size="mini"  plain @click.stop="editPaper(id,scope,scope.row)">编辑</el-button>
                            <el-button size="mini"  plain @click.stop="send">发布</el-button>
                            <el-button size="mini"  plain @click.stop="deleteById(scope,scope.row)">删除</el-button>
                        </div>
                    </template>
                    </el-table-column>
                </el-table>
            </div>
    </el-card>
</template>

<script>
import PaperView from '../views/Papers.vue';
import paper from '../api/paper'
import { ElMessage } from 'element-plus';
export default {
    name: 'HomeworkLibrary',
components:{
    PaperView,
},
    data() {
        return {
            dialogFormVisible: false,
            form: {
                name: '',
                region: '',
            },
            tableData:[ 
            ]
        };
    },

    mounted(){

        // var that = this;

        // var teacherId = localStorage.getItem("token");
        //获取列表

        paper.getAllHomeWorkAndExamByTeacherId(1).then((res)=>{

            if(res.code == 1){
                
            this.tableData = res.data;
            }
        })

        },

    methods: {
        editPaper(id,s){
            //编辑作业
            console.log(id)
            this.$router.push({
                name:'createNewHomework',
                query:{
                    formName:this.tableData[s.$index].paperName,
                    formRegion:this.tableData[s.$index].instruction,
                    paperId:this.tableData[s.$index].id
                }
            })
        },
        //发布按钮
        send(){
            this.$router.push({name:'PublishPaper'})
        },
        //确认创建作业
        createNewHomework(){
            this.dialogFormVisible = false,
            this.$router.push({
                name:'createNewHomework',
                query:{
                    formName:this.form.name,
                    formRegion:this.form.region,
                    paperId:'null'
                }
            })
        },
        //
        deleteById(s){
            console.log(s.$index);
            paper.deleteById(this.tableData[s.$index].id).then((res) => {
            
                if(res.code == 1){
                    ElMessage({
                        showClose:true,
                        message: '删除成功',
                        type:'success',
                    });
                    this.tableData.splice(s.$index,1);
                }else{
                    ElMessage({
                        showClose:true,
                        message:'删除失败',
                        type: 'failed'
                    })
                }

            })
        },
        DeleteAll(){
            paper.deleteAll(this.tableData.id).then((res) => {
                ElMessageBox({
                    title: '删除结果',
                    message: h('p', null, [
                        h('span', null, ''),
                        h('i', { style: 'color: teal' }, res.data),
                    ]),
                })
                this.tableData = this.tableData.splice(this.this_show, 1)
                this.this_show = ''

            })

        },
        getRowKeys(row){
            return row.id;
        }

    },
};
</script>

<style scoped>
.el-button--text {
    margin-right: 15px;
}

.el-select {
    width: 300px;
}

.el-input {
    width: 300px;
}

.dialog-footer button:first-child {
    margin-right: 10px;
}

.newHomeworkBtn{
    color: var(--blueColor2);
    border: 1px solid var(--blueColor2);
}

.text {
    font-size: 14px;
  }
  .box-card {
    margin: 5rem,5rem;
    background-color: white;
  }
.left,.el-button,.operation li{
    cursor: pointer;
}

.el-input {
  width: 300rem;
}
.dialog-footer button:first-child {
  margin-right: 10rem;
}
.nav{
    width: 100%;
    height: 2rem;
    margin-bottom: 2rem;
    /* background-color: aqua; */  
}
.btn_left{
    float: left;
}

.btn_right{
    float: right;
}
.file_box{
    width: 100%;
    height: 100%;
}
.left{
    float: left;  
}
.left:hover,.operation li:hover{
    color: var(--blueColor2);
}
.right{
    float: right;
}
.bor .el-button{
    border: none;
}
.tab {
    overflow: hidden;
}



</style>